<template>
    <view class="page" >
        <view class="post-content">
            <textarea id="content" v-model="postContent" :show-confirm-bar="false" auto-height placeholder="请说明具体问题（300字以内），上传图片" ></textarea>
        </view>
        <view class="post-picture">
            <view class="add-picture-img" v-for="(item, index) in images" :key="index">
                <img :src="item" @click="showPic(item)"  mode="aspectFill"/>
                <view class="del-picture-btn" @click.stop="delImagesList(index)">
                    <img src="/static/img/redXX.png" />
                </view>
            </view>
            <view class="add-picture-btn"  @click="chooseImage" v-if="imagesShow">
                <img src="../../../static/img/add-img.png">
            </view>
        </view>
		
		<view class="btn" @click="sendReport">
			提交反馈
		</view>
		
    </view>
</template>

<script>
    export default {
        name: "graphicposts",
        data(){
            return{
                postContent:'',
                img_ids:[],
                images: [],
                imagesShow: true,
            }
        },
		watch:{
			images(newValue){
			    if (newValue.length >= 9){
			        this.imagesShow = false
			    }
			}
		},
        onShow(){
        },
        methods:{
            //上传图片
            uploadImg(url){
			    var _this = this;
			    for (let i = 0 ; i< url.length; i++){
                    wx.uploadFile({
                        url: 'https://wxapp.bbiji.com/api/file/upload-img',
                        filePath: url[i],
                        name: 'photo',
                        header: {
                            'content-type': 'application/json' // 默认值
                        },
                        success: function (res) {
                            res.data = JSON.parse(res.data);
                            if (res.data.level == 'success') {
                                _this.img_ids.push(res.data.data.id)
                            }
                        }
                    })
                }

            },
            //选择图片
            chooseImage(){
			    var ImageCount = 9-this.images.length;
			    if (ImageCount>0){
                    uni.chooseImage({
                        sizeType: ['original', 'compressed'],  //可选择原图或压缩后的图片
                        sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
                        count: ImageCount,
                        success: res => {
                            console.log(res)
                            this.images= this.images.concat(res.tempFilePaths)
                            // 限制最多只能留下3张照片
                            this.uploadImg(res.tempFilePaths);
                            // $digest(this)
                        }
                    })
                } else {
                    uni.showToast({
                        icon:'none',
                        title:"已达到最大可选图数量~"
                    })
                }

            },
            // 预览图片
            showPic(url){
                uni.previewImage({
                    indicator:"none",
                    current:url,
                    urls: this.images
                });
            },
            //取消已选择图片
            delImagesList(id){
                this.images.splice(id,1);
                this.img_ids.splice(id,1);
            },
			async sendReport(){
				let params={
					user_token:uni.getStorageSync('userToken'),
					content:this.postContent,
					img_id:this.img_ids
				}
				let res=await this.$api.sendReport(params);
				if(res.data.level=='success'){
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/person/person'
						})
					},2000)
				}
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
			}
        },
    }
</script>

<style scoped lang="scss">
    .page{
        padding: 30rpx;
        .post-content{
            padding: 30rpx 10rpx;
            textarea{
                width: 100%;
                line-height: 40rpx;
                font-size: 32rpx;
                color: #000000;
                min-height: 200rpx;
            }
        }
        .post-picture{
            padding: 0.2vw;
            margin-top: 30rpx;
            .add-picture-btn{
                display: inline-block;
                width: 28vw;
                height: 28vw;
                margin: 1vw;
                border: 2rpx dashed #CCCCCC;
                border-radius: 20rpx;
                img{
                    width: 30%;
                    height: 30%;
                    margin: 35%;
                }
            }
            .add-picture-btn.hide{
                display: none;
            }
            .add-picture-img{
                position: relative;
                display: inline-block;
                width: 28.5vw;
                height: 28.5vw;
                margin: 1vw;
                overflow: visible;
                img{
                    border-radius: 20rpx;
                    overflow: hidden;
                }
                .del-picture-btn{
                    width: 40rpx;
                    height: 40rpx;
                    position: absolute;
                    background: #ffffff;
                    border-radius: 360rpx;
                    top: -1vw;
                    right: -1vw;
                }
            }
        }
		.btn{
			background: #FFE226;
			font-size:32rpx;
			text-align: center;
			font-weight: 600;
			position: fixed;
			bottom: 60rpx;
			width:calc(100vw - 60rpx);
			border-radius: 16rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
    }
</style>